<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-model记事本</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
  </head>
  <style>
   
  </style>
  <body>
    <div id="box">
      <div class="head">
        <h2>拾忆记事本</h2>
        <p>记录生活点点滴滴，写下生活每一个美好</p>
        <div class="input">
          <span>内容</span>
          <input type="text" placeholder="请输入你要记事的内容" v-model="keyword"  @keyup.13="add"  />
          <span @click="add">确认</span>
        </div>
      </div>
      <!-- 循环遍历 -->
      <ul class="list">
        <li v-for ="(item,index) in list">
          <!-- 前面的序号 -->
          <span class="xh">{{index+1}}</span>
          <span>{{item}}</span>
          <!-- 关闭按钮 -->
          <span class="qc" @click="delall(index)" ></span>
        </li>
        <li>
          <b> 总条数:{{list.length}}</b>
          <b @click="del()" >清除</b>
           <li v-if='list.length==0'>暂无数据</li>
        </li>
      </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      new Vue({
        el:"#box",
        data(){
          return{
            keyword:"",
            // 自定义数组
            list:[]
          }
        },
        // 钩子函数
        created() {
          
        },
        // 方法
        methods: {
          // 点击添加
          add(){
            // 非空判断
            if(this.keyword==''){
              alert("数据不能为空")
            }
            else{
               this.list.push(this.keyword)
            this.keyword=''
            }
          },
          // 单个删除
          delall(index){
            this.list.splice(index,1)
          },
          // 清空
          del(){
            this.list=[]
          }
          
        },
      })
    </script>
  </body>
</html>


